<template>
  <el-card shadow="always" class="box-card">
    <router-link :to="`/article/${item.id}`" class="article md:flex-row flex-col">
      <view class="image-warpper" hover-class="none" hover-stop-propagation="false">
        <el-image class="image" :src="item.cover || DefaultArticle" alt=""
        fit="cover" >
          <template #error>
            <div>sgauisgai</div>
          </template>
      </el-image>
      </view>
      <div class="content">
        <h2 class="title">{{ item.title }}</h2>
        <div class="info">
          <div class="info-item">
            <ep-calendar class="icon" />
            <span>发表于{{ item.createdAt }}</span>
          </div>
          <div class="info-item">
            <material-symbols-light-update-rounded class="icon" />
            <span>更新于{{ item.updatedAt }}</span>
          </div>
          <div class="info-item">
            <ep-folder-opened class="icon" />
            <span>{{ item.category?.name }}</span>
          </div>
          <div class="info-item">
            <TdesignTagFilled class="icon" />
            <span>{{ tags}}</span>
          </div>
          <div class="info-item">
            <solar-like-linear class="icon" />
            <span>{{ item.thumb_up }}</span>
          </div>
          <div class="info-item">
            <HugeiconsView class="icon" />
            <span>{{ item.view_times }}</span>
          </div>
        </div>
        <div class="desc">{{ item.article_description }}</div>
      </div>
    </router-link>
  </el-card>
</template>
<script setup>
import EpCalendar from '~icons/ep/calendar';
import MaterialSymbolsLightUpdateRounded from '~icons/material-symbols-light/update-rounded';
import EpFolderOpened from '~icons/ep/folder-opened';
import TdesignTagFilled from '~icons/tdesign/tag-filled';
import SolarLikeLinear from '~icons/solar/like-linear';
import HugeiconsView from '~icons/hugeicons/view';
import DefaultArticle from '@/assets/images/default-article.jpg';
const props = defineProps(
  {
    item: {
      type: Object,
      default: () => ({})
    }
  }
)

// console.log('item', props.item)

const tags = computed(() => props.item.tags?.map(tag => tag.name).join(','))

</script>
<style lang="scss" scoped>
.box-card {
  --el-card-padding: 0px;
  margin-bottom: 20px;
  &:nth-child(even) .article{
    flex-direction: row-reverse;
  }
}

.article {
  display: flex;
  height: 250px;

  .image-warpper {
    width: 45%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;

    .image {
      width: 100%;
      height: 100%;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.25);
      }
    }
  }

  .content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 20px;
      font-weight: bold;
    }

    .info {
      margin: 15px 0;
      display: flex;
      flex-wrap: wrap;
      row-gap: 10px;
      align-items: center;
      font-size: 14px;
      color: #666;

      .info-item {
        display: flex;
        align-items: center;

        .icon {
          margin-right: 5px;
        }

        &::after {
          content: '|';
          margin: 0 6px;
          // border-left: 1.5px solid #ccc;
          // height: 12px;
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    .desc {
      font-size: 14px;
    }
  }
}
</style>